<template>
  <t-breadcrumb :max-item-width="'150'" class="tdesign-breadcrumb">
    <t-breadcrumbItem v-for="item in crumbs" :key="item.to" :to="item.to" disabled>
      {{ item.title }}
    </t-breadcrumbItem>
  </t-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();//保证单例模式

const crumbs = computed(() => {
  const pathArray = route.path.split('/').filter(Boolean);
  
  return pathArray.reduce((acc, path, index) => {
    const fullPath = `/${pathArray.slice(0, index + 1).join('/')}`;
    const matchedRoute = route.matched.find(r => r.path === fullPath);
    
    return [
      ...acc,
      {
        to: fullPath,
        title: matchedRoute?.meta.title || path
      }
    ];
  }, [] as Array<{ to: string; title: string }>);
});
</script>
<style>
.tdesign-breadcrumb {
  /* margin-bottom: 8px; */
  margin-left: 10px;
}
.t-breadcrumb__inner {
  color: var(--td-text-color-primary) !important;
}
</style>
